import React, { Component } from 'react';

import PropTypes from 'prop-types';
import { times } from 'lodash';

// 假设，这是小明创建的 List 组件
// const List = (props) => {
//   console.log('props', props);
//   const arr = props.colors;
//   const list = arr.map((item, index) => <li key={index}>{item}</li>);
//   return <ul>{list}</ul>;
// };

// List.propTypes = {
//   colors: PropTypes.array, // 约束了 colors 只能传数组
//   gender: PropTypes.oneOf(['男', '女', '保密']),
// };

class List extends Component {
  static propTypes = {
    colors: PropTypes.array, // 约束了 colors 只能传数组
    gender: PropTypes.oneOf(['男', '女', '保密']),
  };

  static defaultProps = {
    pageSize: 20,
  };

  render() {
    console.log('props', this.props);
    const arr = this.props.colors;
    const list = arr.map((item, index) => <li key={index}>{item}</li>);

    return (
      <div>
        <ul>{list}</ul>
        <h4>{this.props.pageSize}</h4>
      </div>
    );
  }
}

// props 默认值的设置
// List.defaultProps = {
//   pageSize: 10,
// };

// 类的静态属性
// List.propTypes = {
//   colors: PropTypes.array, // 约束了 colors 只能传数组
//   gender: PropTypes.oneOf(['男', '女', '保密']),
// };

class App extends Component {
  render() {
    // 小红使用小明创建的 List 组件
    return (
      <List colors={[1, 2, 3]} gender={'保密'} pageSize={30}>
        list
      </List>
    );
  }
}

// 函数对象参数，解构默认赋值
const App2 = ({ pageSize = 10, ...restProps }) => {
  console.log('restProps', restProps);
  return (
    <div>
      <h3>{pageSize}</h3>
      <h3>{restProps.xx}</h3>
    </div>
  );
};

export default App2;
